.b-goods-container{
  padding-bottom: 112rpx;
  padding-bottom: calc(112rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(112rpx + env(safe-area-inset-bottom));

  .back-btn{
    width: 60rpx;
    height: 60rpx;
    top: calc(32rpx + env(safe-area-inset-top));
    left: 32rpx;
    position: fixed;
    z-index: 9;

    image{
      width: 60rpx;
      height: 60rpx;
    }
  }

  .platform{
    color: #fff;
    font-size: 20rpx;
    padding: 0 4rpx;
    line-height: 28rpx;
    background: #E42305;
    display: inline-block;
    vertical-align: middle;
    border-radius: 6rpx;
    margin-bottom: 8rpx;
    margin-right: 8rpx;
    &.platform-VOP{
      background: #E1017E;
    }
  }

  // position: relative;
  .goods-swiper{
    width: 100%;
    height: 750rpx;
  }
  .info-block{
    padding: 30rpx;
    margin-bottom: 20rpx;
    background: #fff;
    .rule-box{
      height: 44rpx;
      background: rgba(239, 1, 13, 0.1);
      border-radius: 8rpx;
      font-size: 24rpx;
      @include flex;
      @include j-between;
      @include a-center;
      padding: 0 25rpx;
      margin: 10rpx 0;
      .rule-text {
        color: #F00012;
        @include text-ellipsis;
        width: 500rpx;
      }
      .rule-btn {
        color: #333;
      }
    }
  }
  .goods-name{
    @include text-ellipsis-line;
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: bold;
    line-height: 40rpx;
    height: 80rpx;
    box-sizing: content-box;
  }
  .between-block{
    @include flex;
    @include j-between;
    @include a-end;
  }
  .goods-price{
    
    .price{
      color: #EA3644;
      font-size: 60rpx;
      font-weight: 400;
      display: inline-block;
      .price-text{
        font-size: 24rpx;
        display: inline-block;
        margin-left: 10rpx;
      }
      &::before{
        content: '￥';
        font-size: 30rpx;
      }
    }
    .original-price{
      color: #999;
      font-size: 24rpx;
      display: inline-block;
      margin-left: 24rpx;
    }
  }
  .month-sales{
    color: #999;
    font-size: 24rpx;
    padding-bottom: 12rpx;
  }
  .commission-block{
    @include flex;
    @include a-center;
    @include j-between;

    font-size: 24rpx;
    font-weight: 500;
    padding: 0 54rpx 32rpx;
    margin: 24rpx -34rpx 0;
    height: 100rpx;
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-sizing: border-box;
    // border-radius: 10rpx 10rpx 0 0;

    .btn{
      color: #E8CC98;
      background: #333;
      line-height: 40rpx;
      padding: 0 12rpx;
      border-radius: 20rpx;
    }
  }
  .coupon-block{
    @include flex;
    @include a-center;
    margin-left: -16rpx;
    .left, .right{
      position: relative;
      &>image{
        height: 0;
      }
      .content{
        @include flex(column);
        @include center;

        color: #FFF;
        top: 0;
        bottom: 14rpx;
        left: 0;
        right: 0;
        position: absolute;
      }
    }
    .left{
      font-size: 30rpx;
      &>image{
        width: 490rpx;
      }
      .date{
        font-size: 18rpx;
      }
    }
    .right{
      font-size: 26rpx;
      &>image{
        margin-top: 4rpx;
        margin-left: -1px;
        width: 228rpx;
      }
    }
  }
  .rights-block{
    @include flex;
    @include a-center;
    padding: 24rpx 0 12rpx;

    .rights-item{
      @include sub-item;
      @include flex;
      @include center;
      color: #666;
      font-size: 24rpx;

      image{
        width: 30rpx;
        height: 30rpx;
        margin-right: 8rpx;
      }
    }

    &.border{
      border-top: 1px solid rgba(230,230,230,1);
    }
  }
  .recommend-info{
    color: #666;
    font-size: 24rpx;
    .title{
      color: #000;
      font-size: 30rpx;
      font-weight:bold;
      padding-bottom: 28rpx;
    }
  }
  .detail-block{
    .title{
      color: #666674;
      font-size: 26rpx;
      line-height: 88rpx;
      text-align: center;
      position: relative;

      &::before,
      &::after{
        content: '';
        width: 52rpx;
        height: 1px;
        background: #666674;
        display: inline-block;
        top: 44rpx;
        position: absolute;
      }

      &::before{
        margin-left: -100rpx;
      }
      &::after{
        margin-left: 48rpx;
      }
    }
    .content{
      background: #fff;
    }
    .img{
      width: 100%;
      height: 0;
      display: block;
    }
  }
  .shop-block{
    padding: 60rpx 30rpx;
    .avg-line{
      @include flex;
      @include a-center;
      margin-top: 40rpx;
      .avg-item{
        @include sub-item;
        @include flex;
        @include a-center;

        color: #999;
        font-size: 24rpx;

        .score{
          color: #E42305;
          font-weight: 400;
          margin: 0 12rpx;
        }
        .level{
          width: 28rpx;
          line-height: 28rpx;
          color: #fff;
          text-align: center;
          background: #E42305;
          font-weight: 400;
          border-radius: 8rpx;
        }
      }
    }
  }
  .footer-block{
    @include flex;
    @include a-center;
    padding: 16rpx 20rpx 16rpx 0;
    padding-bottom: 26rpx;
    padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));

    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    background: #fff;
    box-shadow: 0 -6rpx 16rpx 0 rgba(222, 222, 222, 0.35);

    .btn-home{
      @include flex(column);
      @include center;

      color: #000;
      font-size: 24rpx;
      width: 120rpx;
      image{
        width: 38rpx;
        height: 38rpx;
        margin-bottom: 8rpx;
        display: block;
      }
    }

    .btn{
      @include sub-item;
      color: #FEFDFD;
      font-size: 28rpx;
      text-align: center;
      line-height: 80rpx;

      &.btn-share{
        background:linear-gradient(90deg,rgba(253,187,52,1),rgba(229,126,9,1));
        border-radius: 10rpx 0 0 10rpx;
      }
      &.btn-buy{
        background:linear-gradient(90deg,rgba(254,25,71,1),rgba(234,1,5,1));
        border-radius: 0 10rpx 10rpx 0;
      }
    }
  }

  .image-list{
    height: 960rpx;
    .image-item{
      @include transition;
      transform: scale(.9);
      height: 960rpx;
      background: #fff;

      .userinfo-block{
        @include a-center;
        padding: 20rpx;
      }
      .goods-block{
        padding: 0 25rpx;
        .goods-name{
          @include text-ellipsis-line(1);
          height: 50rpx;
          line-height: 50rpx;
        }
        .price{
          font-size: 36rpx;
        }
        .month-sales{
          padding-bottom: 4rpx;
        }
        .between-block{
          padding-top: 10rpx;
        }
      }
      .coupon-block{
        margin-left: 4rpx;
        .left{
          font-size: 30rpx;
          &>image{
            width: 370rpx;
            height: 180rpx;
          }
          .date{
            font-size: 24rpx;
          }
        }
        .right{
          &>image{
            width: 170rpx;
            height: 180rpx;
          }
        }
      }
      .qr-code-block{
        @include flex(column);
        @include center;
        padding: 12rpx 30rpx;
      }
      .qr-code{
        width: 130rpx;
        height: 130rpx;

        &.no-coupon{
          width: 160rpx;
          height: 160rpx;
          display: block;
          // margin-right: 24rpx;
          // margin: 10rpx auto;
        }
      }

      .avatar{
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        margin-right: 20rpx;
      }
      .desc{
        color: #909090;
        font-size: 20rpx;
      }
      .goods-image{
        width: 500rpx;
        height: 500rpx;
        display: block;
        margin: 0 auto;
      }

      &.active{
        transform: scale(1);
      }
    }
  }
}